<template>
    <RouterLink :to="`/detail/${good.id}`" class="goods-item">
        <img v-img-lazy="good.picture"/>
        <p class="name ellipsis">{{ good.name }}</p>
        <p class="desc ellipsis">{{ good.desc }}</p>
        <p class="price">&yen;{{ good.price }}</p>
    </RouterLink>
</template>

<script setup>
    defineProps({
        good:{
            type:Object,
            default: () => {}
        }
    })
</script>

<style lang="scss" scoped>
    .goods-item {
                        display: block;
                        width: 220px;
                        padding: 20px 30px;
                        text-align: center;
                        transition: all 0.5s;
                        &:hover {
                            transform: translate3d(0,-3px,0);
                            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
                        }

                        img {
                            width: 160px;
                            height: 160px;
                        }

                        p {
                            padding-top: 10px;
                        }

                        .name {
                            font-size: 16px;
                        }

                        .desc {
                            color: #999;
                            height: 31px;
                        
                        }

                        .price {
                            color: $xtxColor;
                            font-size: 20px;
                        }


                    }
</style>